<template>
	<view v-if="cart.length">
    <!-- 收货地址 -->
    <my-address></my-address>
		<!-- 标题区域 -->
    <view class="title">
      <uni-icons type="shop" size="18px"></uni-icons>
      <text>购物车</text>
    </view>
    <!-- 购物车列表 -->
    <!-- 滑动删除组件uni-swipe-action配合uni-swipe-action-item使用 -->
    <uni-swipe-action>
    <block v-for="(item , i) in cart" :key="i">
     <uni-swipe-action-item :options="options" @click="swipeActionClickHandler(item)">
        <my-goods :item="item" showRadio="true" :showGoodsCount="true" @radio-change="radioChangeClick" @numChange="changeNum"></my-goods>
     </uni-swipe-action-item>
    </block>
    </uni-swipe-action>
  <my-settle></my-settle>
	</view>
  <view v-else class="empty">
    <image src="../../static/cart_empty@2x.png" mode=""></image>
    <text>空空如也~</text>
  </view>
</template>

<script>
  import {mapState,mapMutations,mapGetters} from 'vuex'
import { computed } from "vue";
  import badgeMix from '../../mixin-tabbar-badge/tabbar_badge.js'
	export default {
    mixins:[badgeMix],
		data() {
			return {
				showRadio:true,
        options:[{
          text:'删除',
          style:{
            backgroundColor:'#C00000'
          }
        }]
			};
		},
   computed:{
     ...mapState('m_cart',['cart']),
     ...mapGetters('m_cart',['total'])
   },
   watch:{
     total:{
       handler(){
         uni.setTabBarBadge({
           index:2,
           text:this.total+''
         })
       }
     }
   },
   methods:{
     ...mapMutations('m_cart' , ['updateGoodsState','upDateGoodsCount','removeGoodsByid']),
     radioChangeClick(e){
       // console.log(e);
       this.updateGoodsState(e)
     },
     changeNum(e){
       console.log(e);
       this.upDateGoodsCount(e)
     },
     swipeActionClickHandler(goods){
       console.log(goods);
       this.removeGoodsByid(goods.goods_id)
     }
   }
	}
</script>

<style lang="scss">
  .empty {
    display: flex;
   flex-direction: column;
    align-items: center;
    padding-top: 150px;
    image {
      width: 90px;
      height: 90px;
    }
    text {
      color: gray;
      font-size: 12px;
      margin-top: 15px;
    }
  }
.title {
  height: 40px;
  display: flex;
  align-items: center;
  font-size: 14px;
  padding-left: 5px;
  border-bottom: 1px solid #efefef;
  text {
    margin-left:10px ;
  }
}
</style>
